import React, { Component } from 'react'
import {View, Text, Picker } from '@tarojs/components'
import './index.scss'
import Utils from '../../../utils/index'
import { AtIcon, AtCalendar, AtFloatLayout } from 'taro-ui'
import 'taro-ui/dist/style/index.scss'

var _toDay;
export default class LgDateSele extends Component {
  constructor (props) {
    super(props)
    this.seleDate = React.createRef()
    this.choDate = this.choDate.bind(this);
    this.onDateChange = this.onDateChange.bind(this);
  }
  state = {
    dateList: [
      {date: '周三', time: '2021-10-10'}
    ],
    hasChoDate: '2021-10-10',
    startDate: 0
  }
  componentWillMount () {
    _toDay = Utils.getDate();
    var dateList = []
    for (let i = 0; i < 6; i++) {
      dateList.push(Utils.getDate1(i));
    }
    this.state.dateList = dateList;
    this.state.hasChoDate = _toDay;
    this.state.startDate = _toDay;
  }
  // componentWillUpdate () {
  //   this.getToday();
  // }
  getToday() {
  }
  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}
  
  startX = 0
  endX = 0
  startTouch (e) {
    this.startX = e.touches[0].clientX;
  }
  moveTouch (e) {
    // this.endX = e.touches[0].clientX;
  }
  endTouch (e) {
    // console.log(this.endX, this.startX)
    // var startDate = this.state.startDate;
    // var curDate = Utils.setDate(startDate);
    // var today = new Date();
    // var startDate = Utils.getDate(0, curDate);
    // if (this.endX - this.startX > 5) {
    //   var targetday_milliseconds = curDate - 1000 * 60 * 60 * 24 * 6;
    // } else if (this.startX - this.endX > 5) {
    //   var targetday_milliseconds = curDate + 1000 * 60 * 60 * 24 * 6;
      
    // }
    // console.log(targetday_milliseconds)
    // today.setTime(targetday_milliseconds);
    // var dateList = []
    // for (let i = 0; i < 6; i++) {
    //   dateList.push(Utils.getDate1(i, curDate));
    // }
    // this.setState({dateList: dateList, startDate: startDate, hasChoDate: startDate});
    // this.endX = 0, this.startX = 0;
  }
  choDate (date) {
    this.setState({hasChoDate: date.time});
    this.props.backDate && this.props.backDate(date)
  }
  onDateChange (e) {
    var curDate = Utils.setDate(e.detail.value);
    var dateList = []
    for (let i = 0; i < 6; i++) {
      dateList.push(Utils.getDate1(i, curDate));
    }
    this.setState({dateList: dateList, startDate: e.detail.value, hasChoDate: e.detail.value});
  }
  render () {
    const that = this;
    return (
        <View className='lg_date_sele_warp' onTouchStart={this.startTouch.bind(this)} onTouchMove={this.moveTouch.bind(this)} onTouchEnd={this.endTouch.bind(this)}>
            <View className='lg_date_sele_content'>
              <View className='lg_date_sele_scroll clear'>
                {
                  this.state.dateList.map((o, i) => {
                    return (
                      <DateItem data={o} index={i} key={'date_i' + i} hasChoDate={that.state.hasChoDate} choDate={that.choDate} />
                    )
                  })
                }

              </View>
            </View>
            {/* <SeleDate ref={this.seleDate} /> */}
            <View></View>
            <View className="lg_date_btn">
              <Picker mode='date' onChange={this.onDateChange}>
                <View>
                  <AtIcon value='calendar' className="my_icon" color='#09F'></AtIcon>
                </View>
              </Picker>
            </View>
        </View>
    )
  }
}

class DateItem extends Component {
  choData (e) {
    console.log(e);
    this.props.choDate(this.props.data);
  }
  formartTime(time) {
    if (_toDay == time) return "今日"
    return time ? time.substr(5) : "未知"
  }
  render () {
    var o = this.props.data;
    var className = (this.props.hasChoDate == o.time) ? ' le_date_item_cho' : '';
    return (
        <View className={'le_date_item left' + className} onClick={this.choData.bind(this)}>
            <View className='le_date_i_day'>{o.date}</View>
            <View className='le_date_i_date'>{this.formartTime(o.time)}</View>
        </View>
    )
  }
}

class SeleDate extends Component {
  constructor(props) {
    super(props)
    this.setVal = this.setVal.bind(this);
  }
  state = {
    type: false
  }
  setVal () {
    this.setState({type: !this.state.type}, function() {
      console.log(this.state.type)
    });
  }
  render () {
    
    return (
        <AtFloatLayout isOpened={this.state.type} title="选择起始日期">
            {
              this.state.type && <AtCalendar minDate="2018/1/1" maxDate="2018/10/1" />
            }
        </AtFloatLayout>
    )
  }
}
 